{if $GALLERY.list != NULL}
    	<link href="includes/plugins/slide/{$GALLERY.slide_name}/css/galleria.css" media="screen" rel="stylesheet" type="text/css" />
    	<script type="text/javascript" src="includes/plugins/slide/{$GALLERY.slide_name}/js/jquery.min.js"></script>
        <script type="text/javascript" src="includes/plugins/slide/{$GALLERY.slide_name}/js/jquery.galleria.js"></script>
        <script type="text/javascript">
        {literal}
			$(document).ready(function(){
				
				$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
				
				$('ul.gallery_demo').galleria({
					history   : true, // activates the history object for bookmarking, back-button etc.
					clickNext : true, // helper for making the image clickable
					insert    : '#main_image', // the containing selector for our main image
					onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
						
						// fade in the image & caption
						image.css('display','none').fadeIn(1000);
						caption.css('display','none').fadeIn(1000);
						
						// fetch the thumbnail container
						var _li = thumb.parents('li');
						
						// fade out inactive thumbnail
						_li.siblings().children('img.selected').fadeTo(500,0.3);
						
						// fade in active thumbnail
						thumb.fadeTo('fast',1).addClass('selected');
						
						// add a title for the clickable image
						image.attr('title','Next image >>');
					},
					onThumb : function(thumb) { // thumbnail effects goes here
						
						// fetch the thumbnail container
						var _li = thumb.parents('li');
						
						// if thumbnail is active, fade all the way.
						var _fadeTo = _li.is('.active') ? '1' : '0.3';
						
						// fade in the thumbnail when finnished loading
						thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
						
						// hover effects
						thumb.hover(
							function() { thumb.fadeTo('fast',1); },
							function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
						)
					}
				});
			});
        {/literal}
        </script>
		
		<div class="demo">
		<div id="main_image"></div>
		<ul class="gallery_demo_unstyled">
        {counter start=0 skip=1 print=false assign=i}
			{foreach name=photos from=$GALLERY.list item=item}
				<li {if $i eq '0'}class="active"{/if}>
					<a href="{$GALLERY.upload_path}{$item->path}" title="{$item->description}" ><img src="{$GALLERY.upload_path_thumb}{$item->path}" alt="demo" /></a> 
				 </li>
			{/foreach}
        {counter}    
		</ul>
		<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
		</div>

		
{/if}  